<template>
	<view class="content">
		<view class="yqhydxj">
			<view class="gz" @click="gz_show=true">
				规则
			</view>
			<image src="/static/yqhydxj.png" mode="aspectFill"></image>
		</view>
		<view class="tips">
			<view class="text">
				·邀请好友开通会员，获得50%会员费返利 <br>
				·邀请女性完成女神认证，获得10元现金奖励
			</view>
			<view class="but">
				<!-- {{ffInfo.yqm?ffInfo.yqm:ffInfo.send_code}} -->
				<view class="yqm butimg" @click="copy(ffInfo.yqm?ffInfo.yqm:ffInfo.send_code)">复制邀请码</view>
				<view class="ewm butimg" @click="qrcodeshow = true">分享二维码</view>
			</view>
		</view>
		<view class="yqbz">
			邀请步骤
		</view>
		<view class="bz">
			<view class="list">
				<view class="img">
					<image src="/static/invite_step_link.png" mode="aspectFill"></image>
				</view>
				<view class="text">
					复制链接或海报给好友
				</view>
			</view>
			<view class="list">
				<view class="img">
					<image src="/static/invite_step_init.png" mode="aspectFill"></image>
				</view>
				<view class="text">
					好友下载后开通会员或完成女生认证
				</view>
			</view>
			<view class="list">
				<view class="img">
					<image src="/static/invite_step_money.png" mode="aspectFill"></image>
				</view>
				<view class="text">
					现金奖励自动到账
				</view>
			</view>
		</view>
		<view class="yqjl_tx">
			<view class="yqjl">
				邀请记录
			</view>
			<view class="tx" @click="nav('wallet')">
				<view class="">
					提现
				</view>
				<image src="../../static/right.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="wrap new-margin-10" v-if="ffInfo">
			<view class="num-ul">
				<view class="list">
					<text class="num">{{ffInfo.invite_count || 0}}</text>
					<view class="name">累计邀请(人)</view>
				</view>
				<view class="list">
					<text class="num big-num">{{ffInfo.vip_num|| 0}}</text>
					<view class="name">可以领取会员(天)</view>
				</view>
				<view class="list">
					<text class="num">{{ffInfo.vip_count|| 0}}</text>
					<view class="name">累计获取会员(天)</view>
				</view>
			</view>
			<view class="btn-wrap flex-c" v-if="ffInfo.vip_num>0">
				<button class="lq-btn" @click="lingqu">领取</button>
			</view>
			<u-mask :show="gz_show">	
				<view class="bgs" v-if="gz_show==true">
					<view class="bg-content">
						<image class="close" @click="gz_show = false" src="../../static/close2.png"></image>
						<view class="bg-title">奖励规则</view>
						<view class="u-content">
							<u-parse :html="text"></u-parse>
						</view>
					</view>
				</view>
			</u-mask>
			<view class="bg">
				<view class="bg-content">
					<view class="bg-title">累计收益(币)</view>
					<view style="text-align: center;padding: 20px 0;font-size: 36rpx;color: #fff;">{{ffInfo.shouyi}}</view>
				</view>
			</view>
			<view class="bg" style="margin-bottom: 80px;">
				<view class="bg-content" style="min-height: 100px;">
					<view class="mem-table">
						<view class="tr flex-bt">
							<view>标识</view>
							<view @click="levelshow = true">邀请用户({{level}}级) <u-icon name="arrow-down"></u-icon>
							</view>
							<view>收益(币)</view>
						</view>
						<view class="tr flex-bt" v-for="(m, index) in ffList">
							<view>{{m.id}}</view>
							<view>{{m.name}}</view>
							<view>{{m.shouyi}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-action-sheet :list="levellist" @click="levelchange" v-model="levelshow"></u-action-sheet>
		<u-mask :show="qrcodeshow">
			<view class="gzh flex-col flex-c">
				<view class="qrimg">
					<!-- #ifndef H5 -->
					<tki-qrcode ref="qrcode" :val="qrval" :size="300" unit="upx" background="#ffffff"
						foreground="#000000" pdground="#000000" icon="/static/logo.png" :iconSize="40"
						:usingComponents="true" :showLoading="true" loadingText="二维码生成中	" />
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<tki-qrcode ref="qrcode" :val="qrval" :size="300" unit="upx" background="#ffffff"
						foreground="#000000" pdground="#000000" icon="/static/logo.png" :iconSize="40"
						:usingComponents="true" :showLoading="true" loadingText="二维码生成中	" @result="qrR" />
					<!-- #endif -->
				</view>
				<text>我的推广码</text>
				<view class="btnplain" @click="saveqrcode">保存二维码</view>
				<image class="close" @click="qrcodeshow = false" src="../../static/close2.png"></image>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				qrval: this.$HOSTURL + '?yq=' + this.$store.state.userid,
				qrcodeshow: false,
				gz_show:false,
				levellist: [{
					text: '1级'
				}, {
					text: '2级'
				}],
				levelshow: false,
				ffList: [],
				ffInfo: {},
				ewm: 0,
				text: '',
				level: 1,
				page: 1,
				more: false,
				// #ifdef H5
				blob: '',
				// #endif
			}
		},
		onShow() {
			this.$getPageContent(7, (res) => {
				this.text = res.body
			})
			this.ffInfo = this.$store.state.userinfo
			console.log(this.ffInfo)
			console.log(11111111111111)
			this.getteam(0)
		},
		methods: {
			// #ifdef H5
			qrR(val) {
				this.blob = this.base64ToBlob(val)
			},
			downloadFile() {
				let aLink = document.createElement('a')
				let evt = document.createEvent("HTMLEvents")
				evt.initEvent("click", true, true)
				aLink.download = 'qrcode'
				aLink.href = URL.createObjectURL(this.blob)
				aLink.dispatchEvent(new MouseEvent('click', {
					bubbles: true,
					cancelable: true,
					view: window
				})) //兼容火狐
			},
			//base64转blob
			base64ToBlob(code) {
				let parts = code.split(';base64,')
				let contentType = parts[0].split(':')[1]
				let raw = window.atob(parts[1])
				let rawLength = raw.length

				let uInt8Array = new Uint8Array(rawLength)

				for (let i = 0; i < rawLength; ++i) {
					uInt8Array[i] = raw.charCodeAt(i)
				}
				return new Blob([uInt8Array], {
					type: contentType
				})
			},
			// #endif
			
			nav(url, params, value) {
				if(url == 'pubdymanic'){
					if(this.$store.state.userinfo.is_identity_authentication != 2){
						this.show = true
						return
					}
				}
				this.show = false
				uni.navigateTo({
					url: `/pages/${url}/index${params?'?'+params+'='+value:''}`
				})
			},
			saveqrcode() {
				// #ifdef H5
				this.downloadFile()
				// #endif
				// #ifndef H5
				this.$refs.qrcode._saveCode()
				// #endif
			},
			levelchange(e) {
				this.level = e + 1
			},
			async getteam() {
				const {
					data: res
				} = await this.$Request({
					url: 'api/Member/team',
					data: {
						id: this.$store.state.userid,
						pagecount: 10,
						pagesize: 10,
						page: this.page,
						level: this.level
					}
				})
				if (res.code == 200) {
					console.log(res)
					this.more = res.data.length == 10
					this.ffList = [...this.ffList, ...res.data]
				}
			},
			copy(val) {
				uni.setClipboardData({
					data: val
				})
			},
			async lingqu() {
				const {
					data: res
				} = await this.$Request({
					url: 'api/member/receive',
					data: {
						id: this.$store.state.userid
					}
				})
				console.log("api/member/receive")
				console.log(ret.msg)
				this.$u.toast(ret.msg)
				
			}
		},
		onReachBottom() {
			if (this.more) {
				this.page++
				this.getteam()
			}
		},
		watch: {
			level() {
				this.ffList = []
				this.page = 1
				this.getteam()
			},
			qrcodeshow(newval, oldval) {
				if (newval) {
					this.$refs.qrcode._makeCode()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		/* #ifndef H5 */
		min-height: 100vh;
		/* #endif */
		/* #ifdef H5 */
		min-height: calc(100vh - 44px);
		/* #endif */
		background-color: #0f0d0f;
		overflow: hidden;
		color: #d5a054;

		.yqhydxj{
			position: relative;
			width: 100%;
			height: 273rpx;
			.gz{
				position: absolute;
				top: 10rpx;
				right: 10rpx;
				z-index: 2;
				color: #fff;
			}
			image{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
			}
		}
		.new-margin-10 {
			width: 660rpx;
			margin: 0 auto;
		}
		.u-content {
			margin-top: 30rpx;
			color: #fff;
		}
		.num-ul {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			width: 660rpx;
			height: 200rpx;
			border: 1px solid #d6a666;
			border-radius: 20rpx;
			margin: 50rpx auto;
		}

		.num-ul .list {
			text-align: center;
			font-size: 12px;
			width: calc(100% / 3);
			margin-bottom: 50rpx;
		}

		.num-ul .name {
			color: #d5a054;
		}

		.num-ul .num {
			font-size: 18px;
			color: #d5a054;
			font-weight: 700;
		}

		.num-ul .big-num {
			font-size: 25px;
		}

		.lq-btn {
			background: #d5a054;
			color: #2a292e;
			border-radius: 20px;
			line-height: 30px;
			padding: 0 25px;
			font-size: 12px;
			margin-bottom: 15px;
		}

		/* 分享 */
		.share-code {
			border-radius: 5px;
			background: linear-gradient(to right, #d59f55, #48382b);
			color: #2a292e;
			font-size: 14px;
			padding: 10px;
			display: flex;
			align-items: center;
			margin: 30px 0;
			justify-content: space-between;
		}

		.share-code * {
			color: #2a292e;
		}

		.share-code .code {
			font-size: 20px;
			font-weight: 700;
		}

		.share-code .copy-btn {
			border-radius: 20px;
			padding: 0 20px;
			line-height: 30px;
			font-size: 12px;
			margin: 0;
			background: #d4a053;
		}

		.bg {
			margin-bottom: 30px;
			border-radius: 5px;
			padding: 1px;
			background: linear-gradient(#d59f55, #48382b);
		}
		.bgs{
			
			
			background-color: #000000;
			border: 3rpx solid rgb(213, 157, 81);
			width: 80vw;
			margin: 20vh 10vw;
			padding: 40rpx 40rpx;
			border-radius: 20rpx;
			position: relative;
			.close{
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				bottom: -100rpx;
				left: calc(50% - 30rpx);
			}
		}

		.bg * {
			color: #a77e3b;
		}

		.bg .bg-content {
			border-radius: 5px;
			background: #1b1a1f;
			font-size: 14px;
			padding: 10px;
		}

		.bg .bg-content p {
			margin-bottom: 10px;
			max-width: 100%;
		}

		.bg .bg-title {
			text-align: center;
		}

		/* 表格 */
		.mem-table {
			width: 100%;
			text-align: center;

			.tr {
				padding: 20rpx 0;
			}
		}


		#ff-footer {
			position: fixed;
			bottom: 0;
			width: 100%;
		}

		.ewm-btn {
			background: linear-gradient(to right, #d5a14e, #b57d30);
			color: #fff;
			border-radius: 25px;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 85vw;
			line-height: 50px;
			margin: 10px 0;
		}


		.ewm-btn text {
			font-weight: 700;
			font-size: 15px;
		}

		/* 二维码 */
		.ewm-wrap {
			position: fixed;
			background: #1b1a1f;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			visibility: hidden;
		}

		.ewm-wrap image {
			width: 30vw;
		}

		.ewm-wrap .ewm-title {
			margin-bottom: 20px;
		}

		.gzh {
			background-color: #000000;
			border: 3rpx solid rgb(213, 157, 81);
			width: 60vw;
			margin: 20vh 20vw;
			padding: 40rpx 40rpx;
			border-radius: 20rpx;
			position: relative;

			.qrimg {
				width: 300rpx;
				height: 300rpx;
			}

			text {
				color: rgb(213, 157, 81);
				padding: 60rpx 0;
				font-size: 28rpx;
			}

			.close {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				bottom: -100rpx;
				left: calc(50% - 30rpx);
			}

			.btnplain {
				border: 3rpx solid rgb(213, 157, 81);
				color: rgb(213, 157, 81);
				width: 100%;
				text-align: center;
				padding: 10rpx;
				font-size: 24rpx;
				border-radius: 60rpx;
			}
		}
		.tips{
			width: 659rpx;			height: 321rpx;
			border: 1px solid #d6a666;
			border-radius: 20rpx;
			margin: 53rpx auto;
			.text{
				width: 561rpx;
				font-size: 28rpx;
				line-height: 50rpx;
				color: #D6A666;	
				margin: 58rpx auto;
			}
			.but{
				width: 561rpx;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				.butimg{
					// background: url('/static/butimg.png') 100% 100% center center no-repeat;
					background-image: url('/static/butimg.png');
					background-repeat: no-repeat;
					background-size: 100%;
					width: 232rpx;
					height: 57rpx;
					color: #000000;
					line-height: 57rpx;
					text-align: center;
				}
			}
		}
		.yqbz{
			width: 127rpx;
			height: 29rpx;
			font-size: 30rpx;
			font-family: SimHei;
			font-weight: 400;
			color: #D6A666;
			margin: 0 auto;
		}
		.bz{
			width: 660rpx;
			height: 251rpx;
			border: 1px solid #d6a666;
			border-radius: 20rpx;
			margin: 53rpx auto;
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			.list{
				width: 170rpx;
				margin:55rpx auto 0;
				.img{
					margin: 0 auto 23rpx;
					width: 60rpx;
					height: 60rpx;
					
					image{
						width: 60rpx;
						height: 60rpx;
					}
				}
				.text{
					font-size: 25rpx;
					color: #D6A666;
					line-height: 35rpx;
				}
			}
		}
		.yqjl_tx{
			width: 660rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			.yqjl{
				
			}
			.tx{
				display: flex;
				justify-content: space-between;
				image{
					width: 12rpx;
					height: 22rpx;
					margin: auto 20rpx;
				}
			}
		}
	}
</style>
